import * as echarts from "echarts";

// 折线图
export const drawLineChart = (dom, xData, yData) => {
  let myChart = echarts.init(dom);

  let option = {
    xAxis: {
      type: "category",
      data: xData
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: yData,
        type: "line"
      }
    ]
  };

  option && myChart.setOption(option);
};

// 堆叠折线图
export const drawStackingLineChart = (dom, xData, seriesData) => {
  let myChart = echarts.init(dom);

  let option = {
    // legend: {
    //   data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
    // },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xData
    },
    yAxis: {
      type: "value"
    },
    series: seriesData
    // series: [
    //   {
    //     name: "Email",
    //     type: "line",
    //     stack: "Total",
    //     data: [120, 132, 101, 134, 90, 230, 210]
    //   },
    //   {
    //     name: "Union Ads",
    //     type: "line",
    //     stack: "Total",
    //     data: [220, 182, 191, 234, 290, 330, 310]
    //   }
    // ]
  };

  option && myChart.setOption(option);
};

// 饼图
export const drawPieChart = (dom, data) => {
  let myChart = echarts.init(dom);

  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      show: true
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
};

// 柱状图
export const drawBarChart = (dom, xData, yData) => {
  let myChart = echarts.init(dom);

  let option = {
    xAxis: {
      type: "category",
      data: xData
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: yData,
        type: "bar"
      }
    ]
  };

  option && myChart.setOption(option);
};

// 堆叠柱状图
export const drawStackingBarChart = (dom, xData, seriesData) => {
  let myChart = echarts.init(dom);

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    xAxis: [
      {
        type: "category",
        data: xData
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: seriesData
    // series: [
    //   {
    //     name: "Direct",
    //     type: "bar",
    //     stack: "Ad",
    //     emphasis: {
    //       focus: "series"
    //     },
    //     data: [320, 332, 301, 334, 390, 330, 320]
    //   },
    //   {
    //     name: "Email",
    //     type: "bar",
    //     stack: "Ad",
    //     emphasis: {
    //       focus: "series"
    //     },
    //     data: [120, 132, 101, 134, 90, 230, 210]
    //   }
    // ]
  };

  option && myChart.setOption(option);
};
